
<script>
export default {
    name: "BlueButton",
    props: {
        type: {
            type: String,
            default: "play"
        }
    },
    data() {
        return {
            iconList: [
                { name: "播放", icon: 'el-icon-ali-play', id: "play" },
                { name: "暂停", icon: 'el-icon-ali-pause', id: "pause" },
                { name: "刷新", icon: 'el-icon-ali-refresh', id: "refresh" },
            ]
        }
    },
    render(h) {
        const buttonItem = this.iconList.find(item => item.id == this.type) ?? {}
        return h('span', {
            class: 'blue-button',
            on: {
                click: () => this.$emit('click')
            }
        }, [
            h('i', {
                class: [buttonItem.icon, 'button-icon'],
            }),
            h('span', { class: 'button-name' }, buttonItem.name)
        ])
    }
}
</script>
<style scoped lang="scss">
.blue-button {
    color: #FFF;
    cursor: pointer;

    .button-icon {
        vertical-align: middle;
        margin-right: 8px;
        color: #149BDA;
    }

    .button-name {
        vertical-align: middle;
        font-size: 14px;
    }
}
</style>